@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme transition for smooth switching */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Prevent transition on theme change to avoid flash */
.theme-transition-disable * {
  transition: none !important;
}

@layer base {
  * {
    @apply antialiased;
  }
  
  body {
    font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    @apply bg-[#FDFDFD] dark:bg-gradient-to-br dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 text-[#161615] dark:text-gray-100;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .font-mono {
    font-family: 'JetBrains Mono', 'Noto Sans SC', monospace;
  }
  
  .font-chinese {
    font-family: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
  }
  
  /* High contrast colors for accessibility */
  :root {
    --color-text-primary: #161615;
    --color-text-secondary: #6B7280;
    --color-bg-primary: #FDFDFD;
    --color-bg-secondary: #F9FAFB;
    --color-border: #E5E7EB;
  }
  
  .dark {
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-bg-primary: #0F172A;
    --color-bg-secondary: #1E293B;
    --color-border: #334155;
  }
}

@layer components {
  .bento-card {
    @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-md border border-gray-200/60 dark:border-slate-600/60 rounded-2xl p-6 shadow-lg dark:shadow-2xl hover:shadow-xl dark:hover:shadow-slate-900/50 transition-all duration-500 hover:scale-[1.02] hover:bg-white dark:hover:bg-slate-700/90;
  }
  
  .bento-card-dark {
    @apply bg-slate-900 dark:bg-slate-900/95 text-white border border-slate-700 dark:border-slate-600 rounded-2xl p-6 shadow-xl dark:shadow-2xl hover:shadow-2xl dark:hover:shadow-slate-900/80 transition-all duration-500 hover:scale-[1.02];
  }
  
  .gradient-primary {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
  }
  
  .dark .gradient-primary {
    background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A855F7 100%);
    box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.4);
  }
  
  .gradient-dark {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    box-shadow: 0 10px 25px -5px rgba(30, 41, 59, 0.3);
  }
  
  .dark .gradient-dark {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.5);
  }
  
  .glass-effect {
    @apply bg-white/10 dark:bg-slate-800/20 backdrop-blur-xl border border-white/20 dark:border-slate-600/30;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
  }
  
  /* Focus styles for accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .bento-card {
      @apply border-2 border-gray-900 dark:border-gray-100;
    }
    
    button {
      @apply border-2 border-current;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Custom slider styles */
  .slider::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
  }

  .slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .dark .slider::-webkit-slider-thumb {
    border: 2px solid #1e293b;
  }

  .dark .slider::-moz-range-thumb {
    border: 2px solid #1e293b;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}